<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg进度环</title>
  <style>
    .circle {
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      ;
    }

    #countdown {
      display: inline-block;
      position: relative;
    }

    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      font-size: 500px;
      font-family: monospace;
      color: #F36F21;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #43119A;
    }
  </style>
  <script src="https://lib.baomitu.com/vue/2.6.12/vue.common.dev.js"></script>
</head>

<body>

  <div id="app" @click="animate">
    <div id="countdown">
      <svg :width="size" :height="size">
        <circle fill="transparent" :stroke-width="stroke" stroke="#270B58" :r="radius" :cx="circleOffset"
          :cy="circleOffset"></circle>
        <circle class="circle" fill="transparent" :stroke-width="stroke" stroke="#F36F21" :r="radius" :cx="circleOffset"
          :cy="circleOffset" :stroke-dasharray="circumference" :stroke-dashoffset="progress" stroke-linecap="round">
        </circle>
      </svg>
      <span>{{ countdown }}</span>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        size: 600,
        stroke: 30,
        percentage: 100,
        timer: null,
        seconds: 10,
      },
      computed: {
        radius() {
          return (this.size / 2) - (this.stroke / 2);
        },
        circleOffset() {
          return this.size / 2;
        },
        circumference() {
          return this.radius * 2 * Math.PI;
        },
        progress() {
          return this.circumference - this.circumference * this.percentage / 100;
        },
        countdown() {
          return Math.ceil(this.seconds * this.percentage / 100)
        }
      },
      methods: {
        animate() {
          this.timer = setInterval(() => {
            this.percentage -= 1 / 10;
            console.log(this.percentage)

            if (this.percentage <= 0) {
              clearInterval(this.timer)
              this.percentage = 100;
            }
          }, this.seconds * 1000 / 1000)
        }
      }
    })
  </script>
</body>

</html>